<template>
  <div class="sidebarNav">
    <el-tooltip class="box-item" effect="dark" content="点赞" placement="left">
      <el-badge :value="zanNum" class="item">
        <el-button circle @click="handleOperation('dianzan')">
          <svg-icon
            :name="dianzanStatus ? 'dianzanhover' : 'dianzan'"
            width="20px"
            height="20px"
          ></svg-icon>
        </el-button>
      </el-badge>
    </el-tooltip>
    <el-tooltip class="box-item" effect="dark" content="收藏" placement="left">
      <el-badge :value="collectNum">
        <el-button circle @click="handleOperation('collect')">
          <el-icon size="20" v-if="!collectStatus"><Star /></el-icon>
          <svg-icon
            name="collecthover"
            width="20px"
            height="20px"
            v-else
          ></svg-icon>
        </el-button>
      </el-badge>
    </el-tooltip>
    <el-tooltip class="box-item" effect="dark" content="评论" placement="left">
      <el-button circle>
        <svg-icon name="news" width="20px" height="20px"></svg-icon>
      </el-button>
    </el-tooltip>

    <el-tooltip
      class="box-item"
      effect="dark"
      content="开启沉浸式阅读"
      placement="left"
    >
      <el-button circle>
        <el-icon size="20"><FullScreen /></el-icon>
      </el-button>
    </el-tooltip>

    <el-tooltip class="box-item" effect="dark" content="打赏" placement="left">
      <el-button circle>
        <svg-icon name="dashang" width="20px" height="20px"></svg-icon>
      </el-button>
    </el-tooltip>
  </div>
</template>
<script setup>
let $props = defineProps(["articleId", "articleInfo","dianzanStatus","collectStatus"]);
let $emits = defineEmits(["getInfo","changeStatus"]);
import { ref, computed, onMounted,nextTick } from "vue";
import socket from "@/utils/socket.js";
import { useStore } from "vuex";
let $store = useStore();

socket.on("response",(type)=>{
  $emits("getInfo")
  if(type==="collect"&&$props.collectStatus===false) {
    ElMessage({
      type:"success",
      message:"收藏成功！"
    })
  }else if(type==="collect"&&$props.collectStatus===true) {
    ElMessage({
      type:"success",
      message:"取消收藏"
    })
  }

  if(type==="dianzan") {
    if(!$props.dianzanStatus) {
      ElMessage({
      type:"success",
      message:"点赞成功！"
    })
    }else {
      ElMessage({
      type:"success",
      message:"取消点赞"
    })
    }
  }
})

let zanNum = computed(() => {
  if ($props.articleInfo) {
    let ids =
      $props.articleInfo.dianzanIds.split(",").filter((item) => item !== "") ||
      [];
    console.log(ids, "ids");
    return ids.length;
  } else {
    return 0;
  }
});
let collectNum = computed(() => {
  if ($props.articleInfo) {
    let ids = $props.articleInfo.collectIds.split(",").filter((item) => item !== "") || [];
    console.log(ids, "collecgtids");

    return ids.length;
  } else {
    return 0;
  }
});

let userId = computed(() => {
  return $store.state.user.userInfo.id;
});

const handleOperation = async (type) => {
  console.log(type, "type", userId.value);

  if (type === "dianzan") {
    let requestObj = {
      status: !$props.dianzanStatus,
      userId: userId.value,
      articleId: $props.articleId,
    };
    console.log("requsetobj",requestObj)
     socket.emit("dianzan", JSON.stringify(requestObj));
  } else if (type === "collect") {
   
    let requestObj = {
      status: !$props.collectStatus,
      userId: userId.value,
      articleId: $props.articleId,
    };
    console.log("requsetobj",requestObj)

     socket.emit("collect", JSON.stringify(requestObj));
   
  }
};


</script>
<style lang="scss" scoped>
// 侧边栏
.sidebarNav {
  position: fixed;
  top: 160px;
  left: 120px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;

  :deep(.el-badge__content.is-fixed) {
    top: 3px;
    right: 18px;
  }
  .el-button {
    margin: 0;
    margin-bottom: 20px;
    width: 50px;
    height: 50px;
    :deep svg {
      fill: #7e7e80;
    }
    &:hover {
      :deep svg {
        fill: #409eff;
      }
    }
  }
}
</style>
